import { useState, useContext } from 'react';
import { Popup, Space, Toast } from 'antd-mobile';
import { SendOutline } from 'antd-mobile-icons';
import { ProfileOutlined, DeleteOutlined, FileAddOutlined } from '@ant-design/icons';

import SelectContractor from '../SelectContractor';
import Collection from '../Collection';

import { MySdkStoreContext } from '../../context';

import './style.scss';

export default function(props) {
  const mySdkStore = useContext(MySdkStoreContext);
  const { cid, cname, selectedMessages, getSelectedMessages, onOk, onDeleteOk } = props;
  const [selectContractorVisible, setSelectContractorVisible] = useState(false);
  const [selectedMessage, setSelectedMessage] = useState([]);
  const [mergeToOne, setMergeToOne] = useState(false);
  const [collectionVisible, setCollectionVisible] = useState(false);

  const listFilterFunc = (list) => {
    return list.filter(item => item.cid !== cid);
  }

  const handleTransferMessage = (mergeToOne: boolean) => {
    const ms = getSelectedMessages();
    if(!ms.length) {
      return;
    }
    setSelectedMessage(ms);
    setMergeToOne(mergeToOne);
    setSelectContractorVisible(true);
  }

  const handleSelectOk = async (selectedItem) => {
    const msgIds = selectedMessage.map(msgId => ({ msgId }));
    const res = await mySdkStore.sdk.transferMessages({ msgIds, originalCid: props.cid, toCids: selectedItem, mergeToOne });
    if (res?.errorMessage) {
      Toast.show(res.errorMessage);
      return;
    }
    // if (selectedItem.length === 1) {
    //   history.push({ pathname: `/chatDetail/${selectedItem[0]?.cid}`});
    //   location.reload();
    //   setSelectContractorVisible(false);
    //   onOk();
    // } else {
      Toast.show('转发成功');
      // history.push({ pathname: `/chatDetail/${selectedItem[0]?.cid}`});
      setSelectContractorVisible(false);
      onOk();
    // }
  }

  const handleCollection = () => {
    const ms = getSelectedMessages();
    setSelectedMessage(ms);
    setCollectionVisible(true);
  }

  const handleCollectionOk = async (tagCodes) => {
    try {
      await mySdkStore.sdk.batchCollectMessage({ cid, cname, messageIds: selectedMessage, tagCodes });
      Toast.show('收藏成功');
      setCollectionVisible(true);
      onOk();
    } catch(e) {
      console.log(e);
    }
  }

  const handleDelete = async () => {
    const ms = getSelectedMessages();
    const msgIds = ms.map(msgId => ({ msgId }));
    mySdkStore.sdk.changeMessagesStatus({ type: 'delete', msgIds, cid }).then(data => {
      onDeleteOk(ms);
      onOk();
    });
  }

  return <div className="selectorOperationsBarComponnet">
    <Space style={{ '--gap': '24px' }}>
      <div className={`iconBtn ${selectedMessages.length ? '' : 'disabled'}`} onClick={() => handleTransferMessage(false) }>
        <div className="iconWrap">
          <SendOutline />
        </div>
        逐一转发
      </div>
      <div className={`iconBtn ${selectedMessages.length ? '' : 'disabled'}`} onClick={() => handleTransferMessage(true)}>
        <div className="iconWrap">
          <ProfileOutlined />
        </div>
        合并转发
      </div>
      <div className={`iconBtn ${selectedMessages.length ? '' : 'disabled'}`} onClick={() => handleCollection()}>
        <div className="iconWrap">
          <FileAddOutlined />
        </div>
        收藏
      </div>
      <div className={`iconBtn ${selectedMessages.length ? '' : 'disabled'}`} onClick={handleDelete}>
        <div className="iconWrap">
          <DeleteOutlined />
        </div>
        删除
      </div>
    </Space>
    { selectContractorVisible && <SelectContractor listFilterFunc={listFilterFunc} onOk={handleSelectOk} onClose={() => setSelectContractorVisible(false)} /> }
    <Popup visible={collectionVisible} bodyClassName="selectorOperationsBarComponnet-collectionPopup">
      <Collection onClose={() => setCollectionVisible(false)} onOk={handleCollectionOk} />
    </Popup>
  </div>
}